<template>
  <div class="app-container">
    <!-- 搜索栏开始 -->
    <el-card class="box-card">
      <el-form ref="form" :inline="true" :model="page" size="small" label-width="90px">
        <el-form-item label="角色名称">
          <el-input v-model="page.roleName" style="width: 240px" clearable placeholder="请输入角色名称"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item style="display: block;text-align: center;margin-top: 5px;">
          <el-button type="primary" icon="el-icon-search" @click="page.pageNum = 1;getByPage()">查询</el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 搜索栏结束 -->
    <!-- 操作按钮组 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPer="['sys:role:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="add"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPer="['sys:role:update']"
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="update(null)"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPer="['sys:role:delete']"
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="deleteById(null)"
        >删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 操作按钮组结束 -->
    <!-- 数据表格开始 -->
    <div>
      <el-table v-loading="loading" :data="dataPage.rows" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="50"/>
        <el-table-column align="center" prop="roleName" label="角色名称"/>
        <el-table-column align="center" prop="createBy" label="创建人"/>
        <el-table-column align="center" prop="createTime" label="创建时间"/>
        <el-table-column align="center" prop="updateBy" label="更新人"/>
        <el-table-column align="center" prop="updateTime" label="更新时间"/>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-dropdown class="handle-button">
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"/>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-hasPer="['sys:role:update']">
                  <el-button type="text" icon="el-icon-edit" @click="update(row.roleId)">修改</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-hasPer="['sys:role:delete']" @click.native="deleteById(row.roleId)">
                  <el-button type="text" icon="el-icon-delete">删除</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件开始 -->
    <div class="pageable">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getByPage"
      />
    </div>
    <!-- 分页组件结束 -->

    <!-- 添加弹窗 -->
    <el-dialog title="添加角色" width="30%" :visible.sync="addDialog">
      <sys-role-add v-if="addDialog" @after="getByPage" @close="closeDialog"/>
    </el-dialog>
    <!-- 添加弹窗结束 -->

    <!-- 修改弹窗 -->
    <el-dialog title="修改角色" width="30%" :visible.sync="updateDialog">
      <sys-role-update v-if="updateDialog" :active-id="activeId" @close="closeDialog" @after="getByPage"/>
    </el-dialog>
    <!-- 修改弹窗结束 -->
  </div>
</template>

<script>
import SysRoleApi from '@/api/system/sys-role'
import SysRoleAdd from './sys-role-add'
import SysRoleUpdate from './sys-role-update'

export default {
  name: 'Sysrole',
  components: {
    SysRoleAdd,
    SysRoleUpdate
  },
  data() {
    return {
      // 加载层
      loading: false,
      // 分页搜索条件
      page: {
        roleName: undefined,
        pageNum: 1,
        pageSize: 10,
        params: {}
      },
      // 选中的数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 记录id
      activeId: 0,
      // 集合数据
      dataPage: [],
      // 总页数
      total: 0,
      // 创建时间
      dateRange: [],
      // 添加弹出
      addDialog: false,
      // 修改弹出
      updateDialog: false
    }
  },
  created() {
    this.getByPage()
  },
  methods: {
    /**
     * 分页角色列表
     */
    getByPage() {
      this.loading = true
      SysRoleApi.list(this.addDateRange(this.page, this.dateRange)).then(res => {
        this.dataPage = res
        this.total = res.total
        this.loading = false
      })
    },
    /**
     * 添加组件
     */
    add() {
      this.addDialog = true
    },
    /**
     * 更新组件传递参数
     * @param id
     */
    update(id) {
      this.activeId = id || this.ids[0]
      this.updateDialog = true
    },
    /**
     * 删除角色
     * @param id
     */
    deleteById(id) {
      // 记录选中的ID/删除
      this.$confirm('是否删除该角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        const ids = id || this.ids
        SysRoleApi.delete(ids).then(res => {
          this.$message.success(res.msg)
          this.getByPage()
        })
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 关闭弹窗
    closeDialog() {
      this.addDialog = false
      this.updateDialog = false
      this.activeId = null
    },
    // 重置
    reset() {
      this.page = {
        // 分页传参
        params: {},
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }
      this.dateRange = []
      this.getByPage()
    }
  }
}
</script>

<style scoped>

</style>
